<template>
	<div style="float: left;width: 50%;height: 100%;">
		<el-menu class="el-menu-vertical-demo" :default-active="activeIndex" mode="vertical" @open="handleOpen"
				 @select="handleSelect">
			<ChartNavMenu :navMenus="this.itemList"></ChartNavMenu>
		</el-menu>
	</div>
	<div style="float: right;width: 50%;">
		<div style="margin: 5px 0px 5px 0px" class="search">
			<el-input v-model="search.keyword" placeholder="组件检索">
				<template #append>
					<el-icon @click="searchItem" style="cursor: pointer;">
						<component is="el-icon-search"></component>
					</el-icon>
				</template>
			</el-input>
		</div>
		<div class="dragList">
			<draggable v-model="chartList" animation="200" item-key="itemId" group="people">
				<template #item="{ element }">
					<div class="item">
						<h3>{{ element.title }}</h3>
						<el-image :src="require('../../../../../assets/images/charts/'+element.image)"
								  style="height: 100%;width: 100%;"></el-image>
					</div>
				</template>
			</draggable>
		</div>
	</div>
</template>
<script>
import ChartNavMenu from "./chartNavMenu";

var mousePosition = {
	left: -1,
	top: -1
}
export default {
	components: {
		ChartNavMenu
	},
	data() {
		return {
			search: {
				keyword: ''
			},
			itemList: [],
			tabPosition: '',
			itemId: '',
			chartList: [],
			nodeItem: {}
		}
	},
	mounted() {
		this.getBigDataItemTree();
	},
	created() {
		/**
		 * 以下是为了解决在火狐浏览器上推拽时弹出tab页到搜索问题
		 * @param event
		 */
		if (this.isFirefox()) {
			document.body.ondrop = function (event) {
				// 解决火狐浏览器无法获取鼠标拖拽结束的坐标问题
				mousePosition.left = event.layerX
				mousePosition.top = event.clientY - 50
				event.preventDefault();
				event.stopPropagation();
			}
		}
	},
	methods: {
		handleSelect(itemId) {
			this.getAllBigDataChartList(itemId);
		},
		handleOpen(itemId) {
			this.getAllBigDataChartList(itemId);
		},
		searchItem() {
			console.log(this.search.keyword);
		},
		async getBigDataItemTree() {
			let res = await this.$API.bigdata.bigDataItem.getBigDataItemTree.get();
			if (res.code == 200) {
				this.itemList = res.data;
			}
		},
		async getAllBigDataChartList(itemId) {
			let res = await this.$API.bigdata.bigDataChart.getAllBigDataChartList.get({itemId: itemId});
			if (res.code == 200) {
				this.chartList = res.data;
			}
		},
		isFirefox() {
			var userAgent = navigator.userAgent
			if (userAgent.indexOf("Firefox") > -1) {
				return true
			}
			return false
		}
	}
}
</script>
<style scoped>

.search {
	:deep(.el-input-group__append .el-input-group__prepend){
		padding: 0 10px;
	}
}
.dragList {
	overflow: auto;
	padding:5px;
}
.item {
	cursor: move;
	background: #fff;
	text-align: center;
	border: 1px solid #e6e6e6;
}

.dragList .sortable-ghost {
	opacity: 0.5;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 100%;
	height: 100%;
}
</style>
